<template>
    <div>
      <div class="yy-content-1">
        <div id="echart1" style="width:650px; height:400px;margin:auto;margin-top:5%"></div>
 
      </div>
    </div>
</template>
<script>
export default {
  data: function () {
    return {
      tempData: [],
      access_x: [],
      access_y1: [],
      access_y2: []
    };
  },
  mounted () {
    this.$axios.accessStatistic().then(res => {
    
      this.$data.access_x = res.data.household.x_time;
      this.$data.access_y1 = [];
      this.$data.access_y2 = [];
      for (var item of res.data.household.chartData) {
        this.$data.access_y1.push(item.y_value[0]);
        this.$data.access_y2.push(item.y_value[1]);
      }
      
      console.log(this.$data.access_y1, this.$data.access_y2)
      this.drawLine();
    });
   
    
  },
  methods: {
    drawLine () {
      var that = this;
      let myChart = that.$echarts.init(document.getElementById('echart1'));
      // 绘制图表
      myChart.setOption({
        
        title: {
          left: 'center',
          text: '近一周出入统计--K线图' ,
          textStyle: {
            fontSize:26
        }
        },
        tooltip: {
          trigger: 'axis',
           axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
                color: 'bcolorlack',
                width: 2,
                opacity: 1
            }
        }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: that.$data.access_x,
           axisLine: { lineStyle: { color: 'black' } }
        },
        yAxis: {
          type: 'value',
          name: '次数',
           axisLine: { lineStyle: { color: 'black' } }
        },
        series: [
          {
            name: '进入社区',
            type: 'line',
            stack: '总量',
            data: that.$data.access_y1
          },
          {
            name: '离开社区',
            type: 'line',
            stack: '总量',
            data: that.$data.access_y2
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.yy-content-1 {

  margin: auto;
  z-index: 999;
}

</style>
